<template>
  <div class="repairs">
    <div class="title">请扫描故障工位二维码进行报修</div>
    <router-link to="/input-number">
      <yd-button size="large" class="btn-blue btn-default" type="primary">
        <img src="../../assets/icon/scan_m.png">点击扫码
      </yd-button>
    </router-link>
    <div class="title icon-title">请选择损坏部分</div>
    <div class="icon-list">
      <div class="icon" name="table" @click="handleClick">
        <img v-show="!list.table" src="../../assets/icon/table.png">
        <img v-show="list.table" src="../../assets/icon/table_s.png">
        <p>桌子</p>
      </div>
      <div class="icon" name="chair" @click="handleClick">
        <img v-show="!list.chair" src="../../assets/icon/chair.png">
        <img v-show="list.chair" src="../../assets/icon/chair_s.png">
        <p>椅子</p>
      </div>
      <div class="icon" name="cabinet" @click="handleClick">
        <img v-show="!list.cabinet" src="../../assets/icon/cabinet.png">
        <img v-show="list.cabinet" src="../../assets/icon/cabinet_s.png">
        <p>办公柜</p>
      </div>
      <div class="icon" name="power" @click="handleClick">
        <img v-show="!list.power" src="../../assets/icon/power.png">
        <img v-show="list.power" src="../../assets/icon/power_s.png">
        <p>电源</p>
      </div>

      <div class="icon" name="tel" @click="handleClick">
        <img v-show="!list.tel" src="../../assets/icon/tel.png">
        <img v-show="list.tel" src="../../assets/icon/tel_s.png">
        <p>电话</p>
      </div>
      <div class="icon" name="wifi" @click="handleClick">
        <img v-show="!list.wifi" src="../../assets/icon/wifi.png">
        <img v-show="list.wifi" src="../../assets/icon/wifi_s.png">
        <p>网络</p>
      </div>
      <div class="icon" name="light" @click="handleClick">
        <img v-show="!list.light" src="../../assets/icon/light.png">
        <img v-show="list.light" src="../../assets/icon/light_s.png">
        <p>灯光</p>
      </div>
      <div class="icon" name="other" @click="handleClick">
        <img v-show="!list.other" src="../../assets/icon/other.png">
        <img v-show="list.other" src="../../assets/icon/other_s.png">
        <p>其他</p>
      </div>
    </div>
    <yd-cell-item v-show="showDes">
      <yd-textarea
        slot="right"
        v-model.trim="des"
        placeholder="请输入具体损坏的描述"
        maxlength="100"
        :showCounter="false"
      ></yd-textarea>
    </yd-cell-item>
    <yd-button
      size="large"
      type="primary"
      class="btn-blue confirm"
      :disabled="!showDes || !des"
      @click.native="confirm"
    >提交</yd-button>
  </div>
</template>
<script>
export default {
  name: 'Repairs',
  data() {
    return {
      list: {
        table: false,
        chair: false,
        cabinet: false,
        power: false,
        tel: false,
        wifi: false,
        light: false,
        other: false
      },
      des: '',
      showDes: false
    }
  },
  methods: {
    handleClick(e) {
      const name = e.currentTarget.getAttribute('name')
      this.$set(this.list, name, !this.list[name])
    },
    confirm() {
      this.$dialog.toast({
        mes: '提交',
        timeout: 1500
      })
    }
  },
  watch: {
    list: {
      handler(val) {
        this.showDes = false
        for (let i in val) {
          if (this.list[i]) {
            this.showDes = true
          }
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.repairs
  >>>.yd-cell-item
    padding-left: 0.32rem;
    &:after
      display: none;
  >>>.yd-cell-right
    padding-right: 0.32rem;
  >>>.yd-textarea
    padding: 0.24rem 0.3rem 0.22rem 0.32rem;
    border-radius: 8px;
    border: 1px solid #DBDBDB;
    textarea
      height: 2.2rem;
      font-size: 0.3rem;
      color: $darkText;
      &::-webkit-input-placeholder
        color: #C4C4C4;
  .btn-default
    height: 0.96rem !important;
    font-size: 0.28rem !important;
    color: $darkText !important;
    background: #E7E7E7 !important;
    span
      line-height: 0.4rem;
    img
      width: 0.34rem;
      height: 0.34rem;
      margin: -0.04rem 0.2rem 0 0;
  .title
    font-size: 0.32rem;
    color: $darkColor;
    line-height: 0.72rem;
    padding: 0 0.32rem;
  .icon-title
    margin: 0.4rem 0;
    line-height: 0.44rem;
  .icon-list
    overflow: hidden;
    padding: 0 0.4rem;
    .icon
      float: left;
      margin-right: 0.74rem;
      text-align: center;
      &:nth-child(4n)
        margin-right: 0;
      img
        display: block;
        width: 1.12rem;
        height: 1.12rem;
      p
        margin: 0.24rem 0 0.4rem;
        font-size: 0.28rem;
        color: $darkText;
        line-height: 0.4rem;
.confirm
  position: fixed;
  bottom: 0.16rem;
</style>
